<template>
    <div class="app">
        <h1>项目文件目录</h1>
        <div class="content-wrapper">
            <div class="file-tree-container">
                <FileTree :data="historyStore.currentFileTree" />
            </div>
            <div class="code-display-container">
                <CodeDisplay :code="historyStore.currentShowCode" style="height: 950px;"> </CodeDisplay>
            </div>
        </div>
    </div>
</template>


<script setup>
import FileTree from './FileTree.vue'
import CodeDisplay from './CodeDisplay.vue'
import { useHistoryStore } from '@/stores/history'
const historyStore = useHistoryStore()

</script>

<style>
.app {
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.content-wrapper {
    display: flex;
    height: 70vh;
    /* 设置容器高度，以便子元素可以使用 flex */
}

.file-tree-container {
    flex: 1;
    /* 左侧文件树容器占据剩余空间的一部分 */
    max-width: 300px;
    /* 可选：设置最大宽度 */
    border-right: 1px solid #e0e0e0;
    /* 可选：添加分隔线 */
    padding-right: 15px;
}

.code-display-container {
    flex: 3;
    /* 右侧代码显示容器占据剩余空间的大部分 */
    padding-left: 15px;
    overflow: auto;
}
</style>